<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Countdown</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta charset="utf-8" />
    
        <style data-tag="reset-style-sheet">
            /* Resets the default browser styling for various HTML elements */
            html { line-height: 1.15;}
            body { margin: 0;}
            * { box-sizing: border-box; border-width: 0; border-style: solid;}
            p,li,ul,pre,div,h1,h2,h3,h4,h5,h6,figure,blockquote,figcaption { margin: 0; padding: 0;}
            button { background-color: transparent;}
            button,input,optgroup,select,textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0;}
            /* More reset styles follow */
        </style>
      
        <style data-tag="default-style-sheet">
            html {
              font-family: Arial;
              font-size: 16px;
            }
      
            body {
              font-weight: 400;
              font-style:normal;
              text-decoration: none;
              text-transform: none;
              letter-spacing: normal;
              line-height: 1.15;
              color: var(--dl-color-theme-neutral-dark);
              background: var(--dl-color-theme-neutral-light);
      
              fill: var(--dl-color-theme-neutral-dark);
            }
        </style>
      
    </head>
  <body>
    <link rel="stylesheet" href="modes.css" />
    <link rel="stylesheet" href="Clock.css" />
    <div>
      <link href="Countdown.css" rel="stylesheet" />

      <div class="countdown-container1">
        <div class="countdown-container2">
          <span class="countdown-text10">
            <span>ESP8266 Counter</span>
            <br/>
          </span>
        </div>
        <br>
        <div class="countdown-container3">
            <div class="page-container12">
                <h2 class="page-text13 thq-heading-2">Countdown</h2>
              </div>
        </div>
        <div class="countdown-container4">
          <div>
            <div class="countdown-container6">
              <span>Formatted as: dd/mm/yyyy</span><br>
              <input type="datetime-local" id="datetimeInput"/>
            </div>
          </div>
        </div>

        <div class="page-container18">
            <span class="page-text18">
              <span>Timezone</span>
              <br />
            </span>
            <select id="timezone-dropdown" class="thq-select">
              <option value="-43200">UTC -12:00 (Dateline Standard Time)</option>
              <option value="-39600">UTC -11:00 (Samoa Standard Time)</option>
              <option value="-36000">UTC -10:00 (Hawaiian Standard Time)</option>
              <option value="-32400">UTC -09:00 (Alaskan Standard Time)</option>
              <option value="-28800">UTC -08:00 (Pacific Standard Time, USA & Canada)</option>
              <option value="-25200">UTC -07:00 (Mountain Standard Time, USA & Canada)</option>
              <option value="-21600">UTC -06:00 (Central Standard Time, USA & Canada)</option>
              <option value="-18000">UTC -05:00 (Eastern Standard Time, USA & Canada)</option>
              <option value="-14400">UTC -04:00 (Atlantic Standard Time, Canada)</option>
              <option value="-10800">UTC -03:00 (Argentina Standard Time)</option>
              <option value="-7200">UTC -02:00 (Mid-Atlantic Standard Time)</option>
              <option value="-3600">UTC -01:00 (Azores Standard Time)</option>
              <option value="0" selected>UTC +00:00 (Greenwich Mean Time, Western European Time)</option>
              <option value="3600">UTC +01:00 (Central European Time, West Africa Time)</option>
              <option value="7200">UTC +02:00 (Eastern European Time, Central Africa Time)</option>
              <option value="10800">UTC +03:00 (Moscow Standard Time, East Africa Time)</option>
              <option value="12600">UTC +03:30 (Iran Standard Time)</option>
              <option value="14400">UTC +04:00 (Azerbaijan Standard Time, UAE Standard Time)</option>
              <option value="16200">UTC +04:30 (Afghanistan Time)</option>
              <option value="18000">UTC +05:00 (Pakistan Standard Time, Uzbekistan Time)</option>
              <option value="19800">UTC +05:30 (Indian Standard Time, Sri Lanka Time)</option>
              <option value="20700">UTC +05:45 (Nepal Time)</option>
              <option value="21600">UTC +06:00 (Bangladesh Time, Bhutan Time)</option>
              <option value="23400">UTC +06:30 (Cocos Islands Time, Myanmar Time)</option>
              <option value="25200">UTC +07:00 (Indochina Time, Western Indonesia Time)</option>
              <option value="28800">UTC +08:00 (Australian Western Standard Time, Singapore Standard Time)</option>
              <option value="32400">UTC +09:00 (Japan Standard Time, Korea Standard Time)</option>
              <option value="34200">UTC +09:30 (Australian Central Standard Time)</option>
              <option value="36000">UTC +10:00 (Australian Eastern Standard Time, Papua New Guinea Time)</option>
              <option value="37800">UTC +10:30 (Lord Howe Island Time)</option>
              <option value="39600">UTC +11:00 (Solomon Islands Time, New Caledonia Time)</option>
              <option value="43200">UTC +12:00 (Fiji Time, New Zealand Standard Time)</option>
              <option value="45900">UTC +12:45 (Chatham Islands Time)</option>
              <option value="46800">UTC +13:00 (Tonga Time, Phoenix Islands Time)</option>
              <option value="50400">UTC +14:00 (Line Islands Time)</option>
          </select>        
        </div>

        <div class="countdown-container7">
            <button type="button" id="startButton" class="button addButton">Start</button>
            <button type="button" id="saveButton" class="button submitButton">Save</button>
            <button type="button" id="stopButton" class="button subtractButton">Pause</button>
        </div>

        <div class="countdown-container7"><span>The countdown is currently:</span><span id="onOffText" style="color: #f44336;">off</span></div>

        <div class="countdown-container9">
          <span class="countdown-text19">Group ID:&nbsp;</span>
          <span id="groupID-text" class="countdown-text20">Error</span>
        </div>

      </div>
    </div>

    <div id="messageContainer" class="message-container">
        <p id="messageText">Settings have been saved!</p>
    </div>

    <!-- Custom confirmation modal -->
    <div id="confirmModal" class="modal">
        <div class="modal-content">
            <span id="closeModal" class="close">&times;</span>
            <p id="confirmMessageText">Are you sure you want to save these settings? This will override any existing settings</p>
            <div class="modal-buttons">
                <button id="confirmYes" class="button addButton">Save</button>
                <button id="confirmNo" class="button subtractButton">Cancel</button>
            </div>
        </div>
    </div>

    <script type="module" src="Countdown.js"></script>
  </body>
</html>
